<template>
  <div>
    <div
        class="listBox"
        :style="{
          padding:padding+'px',
        }"
    >
      <div
          class="listBox-search listBottom12"
          :style="{
              marginBottom:padding>12?padding/2+'px':padding+'px',
              padding:padding+'px',
          }"
          :class="{ borderRadius:padding>0}"
          v-if="search && searchType && searchType.length>1 && isSearchShow"
      >
        <div></div>
        <div>
          <slot name="btn"></slot>
        </div>
      </div>
      <div
          class="listBox-main flexAuto"
          :class="{borderRadius:padding>0}"
      >
        <div
            class="listBox-btn"
            :style="{paddingLeft:padding+'px',paddingRight:padding+'px'}"
        >
          <div class="buttons">
            <template v-if="table  && table.buttons  && table.buttons.length>0">
              <template v-for="buttons in table.buttons">
                <el-button
                    type="primary"
                    size="mini"
                    :disabled="disabledButton(buttons)"
                    @click="handleBtn(buttons,tabelData.on)"
                    v-if="activeMenu.includes(buttons.permission) || !buttons.permission"
                >
                  <p>{{ buttons.title }}</p>
                </el-button>
              </template>
            </template>
            <h3 v-else>{{ title }}</h3>
          </div>
          <div class="iconButtonflex">
            <popover-box :width="320" placement="bottom-end" v-if="table">
              <template #btn>
                <div class="iconButton" title="设置表头">
                  <i class="el-icon-s-operation"/>
                </div>
              </template>
              <template #default>
                <div class="tableDiv">
                  <div class="tableDiv-thead">
                    <div class="tableDiv-tr">
                      <div class="tableDiv-auto">表格名称</div>
                      <div class="w80 tc">是否隐藏</div>
                      <div class="w80 tc">是否悬浮</div>
                    </div>
                  </div>
                  <div class="tableDiv-tbody">
                    <el-scrollbar>
                      <template v-for="(item,index) in table.thead">
                        <template v-if="item.children && item.children.length>0">
                          <template v-for="children in item.children">
                            <div class="tableDiv-tr">
                              <div class="tableDiv-auto">{{ children.label }}</div>
                              <div class="w80 tc">
                                <form-box
                                    :form="children"
                                    prop="hidden"
                                    form-type="开关"
                                    size="mini"
                                />
                              </div>
                              <div class="w80 tc">
                                <form-box
                                    :form="children"
                                    prop="fixed"
                                    form-type="开关"
                                    size="mini"
                                />
                              </div>
                            </div>
                          </template>
                        </template>
                        <template v-else>
                          <div class="tableDiv-tr">
                            <div class="tableDiv-auto">{{ item.label }}</div>
                            <div class="w80 tc">
                              <form-box
                                  :form="item"
                                  prop="hidden"
                                  form-type="开关"
                                  size="mini"
                              />
                            </div>
                            <div class="w80 tc">
                              <form-box
                                  :form="item"
                                  prop="fixed"
                                  form-type="开关"
                                  size="mini"
                              />
                            </div>
                          </div>
                        </template>
                      </template>
                    </el-scrollbar>
                  </div>
                </div>
              </template>
            </popover-box>
          </div>
        </div>
        <div
            class="listBox-content flexAuto"
            v-loading="loading"
            element-loading-spinner="el-icon-loading f32"
            element-loading-text="数据加载中"
        >
          <table-box
              :tbody="table.tbody"
              :thead="table.thead"
              :tabelData="tabelData"
              @handleDblclick="handleDblclick"
              @handlerFilter="handlerFilter"
              @handleBtn="handleBtn"
          >
            <template v-for="item in table.thead" #[item.prop]="{scope}">
                <span v-if="$scopedSlots[item.prop]">
                  <slot :name="item.prop" :scope="scope"></slot>
                </span>
                <span v-else>
                  <row-cell-item
                      :data="item"
                      :parent-data="table.tbody"
                      :scope="scope"
                  />
                </span>
            </template>
          </table-box>
        </div>
        <div
            class="listBox-page"
            :style="{
              paddingLeft:padding+'px',
              paddingRight:padding+'px',
            }"
            v-if="search"
        >
          <div>
            <slot name="pageL"></slot>
            <p v-if="!$scopedSlots.pageL">共有<span class="c1 mlr4">{{ search.total }}</span>数据</p>
          </div>
          <div>
            <p v-if="$scopedSlots.pageL">共有<span class="c1 mlr4">{{ search.total }}</span>数据</p>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="search.pageIndex"
                :page-sizes="pageSizes"
                :page-size="search.pageSize"
                layout="sizes, prev, pager, next, jumper"
                :total="search.total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <div class="pup" v-if="$scopedSlots.pup">
      <slot name="pup" :tabelData="tabelData"></slot>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import FlexListBox from '@/comModule/FlexListBox'
import TableBox from '@/comModule/TableBox'
import RowCellItem from '@/comModule/TableBox/RowCellItem'
import FormBox from '@/comModule/FormBox'
import PopoverBox from '@/comModule/PopoverBox'
export default {
  name: 'ListBox',
  props: {
    table: {
      type: Object
    },
    search: {
      type: Object
    },
    searchType: {
      type: Array
    },
    padding: {
      type: Number,
      default: () => {
        return 12
      }
    },
    loading: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    listWidth: {
      type: Number
    }
  }, // 获取父组件数据
  components: {
    PopoverBox,
    FormBox,
    RowCellItem,
    TableBox,
    FlexListBox
  },
  mounted() {
    this.title = this.$route.meta.title
    if (this.search){
      if (Object.keys(this.searchCopy).length === 0) {
        this.searchCopy = JSON.parse(JSON.stringify(this.search))
        delete this.searchCopy.pageIndex
        delete this.searchCopy.pageSize
        delete this.searchCopy.total
        delete this.searchCopy.sizeNum
      }
      if (this.searchType && this.searchType.length > 0) {
        this.searchTypeText = (this.searchType).filter((item) => {
          return !['单选', '多选'].includes(item.formType)
        })
        this.searchTypeTabs = (this.searchType).filter((item) => {
          return ['单选', '多选'].includes(item.formType)
        })
      }
    }
  },
  data() {
    return {
      title: '',//路由名称
      searchCopy: {},
      searchTypeText: [],
      searchTypeTabs: [],
      isSearchShow: true,//是否展开搜索
      isContent: true,//是否显示列表
      pageSizesArr: [],//分页数
      tabelData: {
        on: {},//选择值
        list: []//多选择值
      }
    }
  },
  methods: {
    showBtn() {
      this.isSearchShow = !this.isSearchShow
    },
    initialize() {
      this.tabelData.on = {}
      this.tabelData.list = []
    },
    handleSizeChange(val) {
      this.$set(this.search, 'pageIndex', 1)
      this.$set(this.search, 'pageSize', val)
      this.handleSearch()
    },
    handleCurrentChange(val) {
      this.$set(this.search, 'pageIndex', val)
      this.handleSearch()
    },
    //开始筛选
    handlerFilter(row) {
      this.$emit('handlerFilter', row)
    },
    //双击
    handleDblclick(val) {
      this.$emit('handleDblclick', val)
    },
    handleSearch() {
      //重置tabelData属性
      this.tabelData.on = {}
      this.tabelData.list = []
      let searchArr = JSON.parse(JSON.stringify(this.search))
      delete searchArr.sizeNum
      this.$emit('handleSearch', searchArr)
    },
    //按钮点击
    handleBtn(val, row) {
      this.tabelData.on = row
      this.$emit(val.methodsName, row)
    },
    //按钮禁用状态
    disabledButton(val) {
      let disabledState = true
      //如果表格有选中值着启用
      if (Object.keys(this.tabelData.on).length > 0) {
        if (!this.tabelData.on.disabledButton.includes(val.label)) {
          disabledState = false
        }
      }
      return disabledState
    },
    //重置搜索
    async resetSearchBtn() {
      await this.infoSearchBtn(this.searchType)
      await this.handleSearch()
    },
    //
    infoSearchBtn(scope) {
      if (scope && scope.length > 0) {
        scope.forEach(item => {
          this.search[item.prop] = JSON.parse(JSON.stringify(this.searchCopy[item.prop]))
        })
      }
      this.$message.success('重置成功')
    }
  },
  computed: {
    ...mapGetters(["userInfo"]),
    activeMenu(){
      return this.$route.meta.buttons
    },
    pageSizes() {
      let pageSizes = []
      for (let i = 1; i < 5; i++) {
        if (this.search.pageSize && !this.search.sizeNum) {
          this.search.sizeNum = this.search.pageSize
          pageSizes.unshift(this.search.pageSize * i)
        } else {
          pageSizes.unshift(this.search.sizeNum * i)
        }
      }
      return pageSizes
    }
  }
}
</script>
<style lang="scss" scoped>
.listBox {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #F5F6F9;
  display: flex;
  flex-direction: column;
  > * {
    background: #fff;
  }
  .flexAuto {
    flex: 1;
    overflow: hidden;
    position: relative;
  }
  .borderRadius {
    border-radius: 4px;
  }
  .listBox-main {
    display: flex;
    flex-direction: column;
    .el-empty {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
    }
    > * {
      &:not(:last-child) {
        border-bottom: 1px #eee solid;
      }
      &:not(.listBox-content) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 50px;
        > * {
          display: flex;
          align-items: center;
          &:not(:last-child) {
            margin-right: 8px;
          }
        }
      }
    }
  }
  .iconButtonflex {
    display: flex;
    align-items: center;
    > * {
      margin-left: 8px;
    }
  }
  .iconButton {
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #DCDFE6;
    &:hover {
      background: #3f61f1;
      border-color: #3f61f1;
      color: #fff;
    }
  }
}
.formDl {
  display: flex;
  min-height: 32px;
  align-items: flex-start;
  .label {
    width: 84px;
    display: flex;
    align-items: center;
    line-height: 32px;
    p {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .value {
    flex: 1;
  }
  &.tabsList-item {
    .value {

    }
  }
}
</style>
